<!DOCTYPE html>
<html>
<style>
    .page-group.page-current, .page.page-current{overflow: scroll!important}
    .content{position: relative!important;top:0!important;}
    .bar-tab{position: fixed!important}
</style>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>瑞生源商城</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/H5/css/sm.min.css">
    <link rel="stylesheet" href="/H5/css/malltwo.css?v=20190513">
    <style>
        .card:nth-child(odd){left:2%!important;}
    </style>
</head>
<body>
<div class="page-group ms-controller" :controller="index">
    <div class="page page-current">
        <div style="">
            <a :attr="{'href': @index_adv_link}"  style="display: block; width: 100%;text-align: center;margin: 2px auto 0 auto;">
                <img :attr="{'src': @index_adv_pic}" style="width: 100%;height: auto;" class="maxWidth" >
            </a>
        </div>
        <div class="content visibility">
            <!--<span class="empty"></span>--> <!--这个为不出现空白盒子解决的方法-->





            <!-- <div class="banner">
                 <ul>
                     <li :for="el in @banner"><a :attr="{'href': el.link_url}" style="display:block; background-color: #eee; width:100%; height: 100%;">
                         <img :attr="{'src': el.pic_path}" width='100%' height="100%" onerror="$(this).css('display','none')" alt="">
                     </a></li>
                 </ul>
             </div>-->
            <div :for="el in @goods">
                <div class="goods-list" style="padding-bottom: .6rem;">
                    <div class="card demo-card-header-pic" :for="e in el.list" style="margin: .5rem 0 0 0;width: 47%;left:4%;display:inline-block;" :on-click="@jump(@iv?'/H5/detail?id='+e.id+'&inviteCode='+@iv:'/H5/detail?id='+e.id)">
                        <div valign="bottom" class="card-header color-white no-border no-padding">
                            <a :css="{'background-image': e.list_cover?'url('+e.list_cover+')':'#eee'}" class="goods" style="display: block;width: 100%;height: 152px;background-size: contain; background-position: center; background-repeat: no-repeat;">
                            </a>
                        </div>
                        <div class="card-content">
                            <div class="card-content-inner" style="overflow: hidden;padding: .3rem;">
                                <p class="color-gray" style="color: #8c2193; font-size: .8rem; padding-bottom: 10px;border-bottom: 1px dashed #aaa;overflow: hidden;text-overflow: ellipsis;white-space:nowrap;">{{e.title+" "+e.intro}}</p>
                                <p :if="@vip_level==0" style="color: rgb(222, 66, 101); font-size: .8rem">￥{{e.sell_price}}<span style="color: #333333;  font-size: .7rem; margin-left: .2rem;">团购价</span><span style="float: right; font-size: .7rem; background-color: #e66ca6; color: #fff; padding: .3rem; border-radius: 2px;margin-top: .2rem;">立即购买</span></p>
                                <p :if="@vip_level>0" style="color: rgb(222, 66, 101); font-size: .8rem">￥{{e.price_1}}<span style="color: #333333; font-size: .7rem; margin-left: .2rem;">瑞生价</span><span style="float: right; font-size: .7rem; background-color: #e66ca6; color: #fff; padding: .3rem; border-radius: 2px;margin-top: .2rem;">立即购买</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--<footer>
                <p></p>
            </footer>-->
        </div>
        <nav class="bar bar-tab" style="background-color: white">
            <a class="tab-item external active" href="/H5">
                <span class="new_footer"><img src="/H5/images/footer_01.png" alt=""></span>
                <span class="tab-label">首页</span>
            </a>
            <!--<a class="tab-item external" href="/H5/custom?type=1">
                <span class="new_footer"><img src="/H5/images/footer_02.png" alt=""></span>
                <span class="tab-label">客服</span>
                &lt;!&ndash; <span class="badge" :if="@message>0">{{@message}}</span> &ndash;&gt;
            </a>-->
            <a class="tab-item external" href="/H5/order">
                <span class="new_footer"><img src="/H5/images/footer_03.png" alt=""></span>
                <span class="tab-label">购物车</span>
            </a>
            <a class="tab-item external" href="/H5/orderlist?status=0">
                <span class="new_footer"><img src="/H5/images/footer_04.png" alt=""></span>
                <span class="tab-label">订单管理</span>
            </a>
            <!-- <a class="tab-item external" href="/H5/message">
              <span class="icon icon-message"></span>
              <span class="tab-label">订单管理</span>
              <span class="badge" :if="@message>0">{{@message}}</span>
            </a> -->
            <a class="tab-item external" href="/H5/myMember">
                <span class="new_footer"><img src="/H5/images/footer_05.png" alt=""></span>
                <span class="tab-label">我的</span>
            </a>
        </nav>
    </div>
</div>
<script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
<!-- <script type='text/javascript' src='/H5/js/wx.js' charset='utf-8'></script> -->
<!-- <script type='text/javascript' src='http://res2.wx.qq.com/open/js/jweixin-1.4.0.js' charset='utf-8'></script> -->
<script type='text/javascript' src='/H5/js/mall.js?v=10' charset='utf-8'></script>
<script>
    var timer;
    var index = avalon.define({
        $id: "index",
        loading: false,
        message: "",
        banner: [],
        iv: simpleStorage.get('inviteCode'),
        is_vip: Mall.parseUrl(window.location.href).is_vip,
        picture_urls: "",
        vip_level: "",
        goods: [],
        data: {},
        list: {},
        index_adv_link: '',
        index_adv_pic: '',
        getNews: function () {

            Mall.request("/api/ArticleList", {cate: "notice", page_num: 1, page_size: 2})
                    .always(function (data) {
                        if (data.error_code == 0) {
                            index.list = data.data.list;
                        }
                    })
        },
        getMallHome: function () {
            Mall.request("/api/MallHome", {page_size: 50, is_vip: index.is_vip})
                    .always(function (data) {
                        if (data.error_code == 0) {
                            index.banner = data.data.banner;
                            index.goods = data.data.goods;
                            index.index_adv_link = data.data.index_adv_link;
                            index.index_adv_pic = data.data.index_adv_pic;
                            if (data.data.banner && data.data.banner.length > 1) {
                                if (data.data.banner.length == 2) {
                                    var datas = data.data.banner;
                                    datas.push(data.data.banner[0]);
                                    index.banner = datas;
                                }
                                $(".banner ul").css("width", index.banner.length * 100 + "%");
                                $(".banner ul li").css("width", 100 / index.banner.length + "%");

                                function autoRoll() {
                                    $(".banner ul").animate({"margin-left": "-200%"}, 300, "linear", function () {
                                        $($(".banner ul li")[0]).remove().clone().appendTo(".banner ul");
                                        $(".banner ul").css({"margin-left": "-100%"});
                                    })
                                }

                                timer = setInterval(function () {
                                    autoRoll();
                                }, 3000);

                                function swipe(k) {
                                    timer && clearInterval(timer);
                                    if (k == "left") {
                                        $(".banner ul").animate({"margin-left": "-200%"}, 300, "linear", function () {
                                            $($(".banner ul li")[0]).remove().clone().appendTo(".banner ul");
                                            $(".banner ul").css({"margin-left": "-100%"});
                                            timer = setInterval(function () {
                                                autoRoll();
                                            }, 3000)
                                        })
                                    }
                                    else {
                                        $(".banner ul").animate({"margin-left": 0}, 300, "linear", function () {
                                            $($(".banner ul li")[$(".banner ul li").length - 1]).remove().clone().prependTo(".banner ul");
                                            $(".banner ul").css({"margin-left": "-100%"});
                                            timer = setInterval(function () {
                                                autoRoll();
                                            }, 3000)
                                        })
                                    }
                                }

                                $(".banner ul").swipeLeft(function () {
                                    swipe("left");
                                })
                                $(".banner ul").swipeRight(function () {
                                    swipe();
                                })
                            }
                            avalon.scan(document.body);
                        }
                        $(".content").removeClass("visibility")
                    })
        },
        getUrl: function () {
            if (index.loading) {
                return
            }
            index.loading = true;
            Mall.request("/api/SynLogin")
                    .always(function (data) {
                        if (data.error_code == 0) {
                            window.location.href = data.data.syn_login_url
                        }
                        else {
                            $.alert(data.error_msg);
                            index.loading = false;
                        }
                    })
        },
        getUrl2: function () {
            if (index.loading) {
                return
            }
            index.loading = true;
            Mall.request("/api/SynLogin2")
                    .always(function (data) {
                        if (data.error_code == 0) {
                            window.location.href = data.data.syn_login_url
                        }
                        else {
                            $.alert(data.error_msg);
                            index.loading = false;
                        }
                    })
        },
        info: function () {
            Mall.request("/api/UserInfo")
                    .always(function (data) {
                        if (data.error_code == 0) {
                            index.message = data.data.total_unread;
                            index.vip_level = data.data.vip_level;
                            simpleStorage.set("inviteCode", data.data.invite_code)
                        }
                    })
        },
        jump:function(url){
            window.location.href = url;
        }
    })
    index.getMallHome();
    index.getNews();
    simpleStorage.get("token") && index.info();
</script>
</body>
</html>